<!--  -->
<template>
  <div class="main">
    <div class="aa1">温馨提示:</div>
    <div class="aa">
      <Scroller :lists="list" class="scrollContainer" />
    </div>
    <!-- 头部按钮 开始 -->
    <div class="header-main">
      <!-- 活动规则 -->
      <img
        @click="handleShowMask('rule')"
        src="@/assets/images/2020_dati/abcchina/guize.png"
        alt=""
        class="btn-rule btn"
      />
      <!-- 使用积分 -->
      <img
        @click="toPage('/equity')"
        src="@/assets/images/2020_dati/abcchina/jifen.png"
        alt=""
        class="btn-coin  btn"
      />
      <!-- 转盘抽奖 -->
      <!-- <img
        @click="handleShowMask('turn')"
        src="@/assets/images/2020_dati/abcchina/choujiang.png"
        alt=""
        class="btn-lottery  btn"
      /> -->
      <!-- 我的礼品 -->
      <img
        src="@/assets/images/2020_dati/abcchina/wodelipin1.png"
        alt=""
        class="btn-gift  btn"
        @click="toPage('/dati_goods')"
      />
    </div>
    <!-- 头部按钮 结束 -->

    <!-- 题目 + 按钮 -->
    <div class="body-main">
      <div class="dati-wrap">
        <div class="timu-wrap">
          <MyTimu ref="tm" />
        </div>
        <div class="submit-wrap" style="position: sticky;bottom: 0;" v-if="btn">
          <div class="item-submit" @click="handleSubmit">
            提交
          </div>
        </div>
      </div>
    </div>

    <!-- 弹窗 开始 -->
    <div class="mask-wrap" v-if="JSON.stringify(maskList).includes('true')">
      <div class="mask-wrap">
        <!-- 活动规则 -->
        <MyActivityRules v-if="maskList.rule" />
        <!-- 转盘 -->
        <MyTurntable v-if="maskList.turn" />
        <!-- 提交成功送积分 -->
        <!-- <div class="mask-turn" v-if="maskList.submit"></div> -->
        <div class="coin-wrap" v-if="maskList.submit">
          <img
            class="close"
            @click="maskList.submit = false"
            src="@/assets/images/2020_dati/wjb_close.png"
            alt
          />
          <div class="coin-img">
            <img src="@/assets/images/2020_dati/abcchina/zu.png" alt="" />
            <p class="coin-p">提交成功<br />赠送您</p>
            <p class="coin-p1">20积分</p>
            <p class="coin-p3">所获得积分可在“积分详细”里查看</p>
            <div>
              <img
                class="coin-img1"
                src="@/assets/images/2020_dati/abcchina/zu1.png"
                alt=""
              />
              <p class="coin-p2" @click="toPage('/equity')">立即使用积分</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗 结束 -->
  </div>
</template>

<script>
import { ActionSheet, Toast, Dialog, DialogAlert } from 'vant';
import { baseURL } from '../../../components/Request';
import { baseUrl } from '@/config/env.js';
import wx from 'weixin-js-sdk';
import weixin from '@/components/wx/wx.js';
import { MyTimu, MyActivityRules, MyTurntable, Scroller } from './index'; //自定义组件
export default {
  components: {
    Scroller,
    MyTimu,
    MyActivityRules,
    MyTurntable,
    'van-action-sheet': ActionSheet
  },
  data() {
    return {
      list: [
        '开放式题目如答题内容无效坚持交卷，无效答题达2题以上（含2题），该答卷最终得积分10分。若系统检测到客户发表敏感词汇，系统将自动取消客户的活动资格及活动所获得的礼品权益，情节严重的追究其相关责任。说明：无效作答包含纯数字（例：12345）、纯英文（例：abc）、不文明词汇、反动词汇及与题目内容无关的表述内容。'
      ],
      // 弹窗
      btn: true,
      maskList: {
        rule: false,
        turn: false,
        submit: false
      }
    };
  },
  computed: {},
  watch: {},
  methods: {
    //跳转页面

    toPage(url) {
      console.log('url?', url);
      this.$router.push({
        path: url
      });
    },
    // 提交
    handleSubmit() {
      var tm = this.$refs.tm.timuList;
      console.log('题目.', tm); //连接符号(&;)
      var ret = false;
      var str = '';
      var aaa = [{}];
      //遍历题目
      tm.forEach((item, index) => {
        // console.log(item.answer);
        if (index == tm.length) {
          str += item.answer;
        } else {
          str += item.answer + '&;';
        }
        aaa = item.answer;
        // console.log('aaa', item.answer);
      });

      console.log(aaa == '');
      var res1 = /^(?=.*?[\u4E00-\u9FA5]){2,}/.test(
        tm[10].answer || tm[11].answer
      );
      //   @"^[u4E00-u9FA5]{2,4}$";
      var res2 = /^(?=.*?[\u4E00-\u9FA5]){2,}/.test(
        tm[12].answer || tm[13].answer
      );
      console.log('qweqwe', res2);
      if (aaa != '') {
        if (res2 && res1 != false) {
          this.$http
            .post('/questionnaire/addShow', {
              content: str
            })
            .then(res => {
              console.log('获取', res);
              if (res.data.code == 0) {
                this.maskList.submit = true;
              } else {
                Toast(res.data.message);
              }
            });
          //   console.log(123);
        } else {
          Toast('系统检测你的答题不规范，请重新填写');
        }
      } else {
        Toast('答案不能为空哦');
      }

      // str
      //   console.log('答案: ', str);
      //   this.maskList.submit = true;
    },
    // 显示弹窗
    handleShowMask(name) {
      this.maskList[name] = true;
    },
    jssdk() {
      // $.ajax({
      //   url: serverPath + '/wx/getsignature',
      //   type: 'post',
      //   dataType: 'json',
      //   contentType: 'application/x-www-form-urlencoded; charset=utf-8',
      //   data: {
      //     url: window.location.href
      //   },
      this.$http
        .post('/wx/getsignature', {
          url: window.location.href
        })
        .then(data => {
          // console.log('154646', data);
          console.log('jss回调', data);

          wx.config({
            debug: false,
            appId: data.data.appId,
            timestamp: data.data.timestamp,
            nonceStr: data.data.noncestr,
            signature: data.data.signature,
            jsApiList: [
              'onMenuShareTimeline',
              'onMenuShareAppMessage',
              'hideMenuItems',
              'previewImage',
              'chooseImage',
              'uploadImage'
            ]
          });
        });
    }
  },
  created() {},
  mounted() {
    this.$http.post('/tuser/userInfo', {}).then(res => {
      console.log('sfsd ', res);
      if (res.data.object.isAuth === '0') {
        Dialog.alert({
          title: '提示',
          message: '您还未实名认证',
          // cancelButtonText: '再看看',
          confirmButtonText: '去认证'
        })
          .then(() => {
            this.$router.replace('/real_name');
          })
          .catch(() => {});
        // .catch(() => {});
      }
    });

    console.log('页面加载成功');
    this.jssdk();
    // this.gettimes();
    var that = this;
    wx.ready(function() {
      console.log('第一步');

      //分享到朋友圈
      wx.onMenuShareTimeline({
        title: '有奖答题，约惠邮礼', // 分享标题
        desc: '答题送积分，快快领取吧！', // 分享描述
        link: baseUrl + '/entrance/goto?redir=dati_home', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl:
          'https://m.qpic.cn/psc?/sa14V12pR5zi1j2A9I32e34220fc4031bd7120b0ddde710e12c414V10jwpiW29n053/bqQfVz5yrrGYSXMvKr.cqQ1ILI2fNV2zaVnpudZCKJHUnli3VXGdR*2FflsuopYqvY5gaxb2K2MNUsgFXHGBBKYVtorS.HrGhW3aJtIxl4w!/b&bo=kAGQAQAAAAABByA!&rf=viewer_4', // 分享图标
        success: function(res) {
          console.log(res);
          console.log('分享到朋友圈, onMenuShareTimeline, success');
          that.$http
            .post('/activity/share', {
              source: 'questionnaire '
            })
            .then(res => {
              console.log('到了吗');
              window.location.reload();
            })
            .catch(res => {
              console.log(res);
            });
        },
        cancel: function(res) {
          console.log(res);
          console.log('取消分享到朋友圈cancle, onMenuShareTimeline, cancel');
        },
        fail: function(res) {
          //   console.log(res);
          //   console.log('分享到朋友圈fal, onMenuShareTimeline, fail');
          //   that.$http
          //     .post('/activity/share', {
          //       source: 'questionnaire'
          //     })
          //     .then(res => {
          //       console.log('到了吗');
          //       // window.location.reload();
          //     })
          //     .catch(res => {
          //       console.log(res);
          //     });
        }
      });

      //取“分享给朋友”按钮点击状态及自定义分享内容接口
      wx.onMenuShareAppMessage({
        title: '有奖答题，约惠邮礼', // 分享标题
        desc: '答题送积分，快快领取吧！', // 分享描述
        link: baseUrl + '/entrance/goto?redir=dati_home', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl:
          'https://m.qpic.cn/psc?/sa14V12pR5zi1j2A9I32e34220fc4031bd7120b0ddde710e12c414V10jwpiW29n053/bqQfVz5yrrGYSXMvKr.cqQ1ILI2fNV2zaVnpudZCKJHUnli3VXGdR*2FflsuopYqvY5gaxb2K2MNUsgFXHGBBKYVtorS.HrGhW3aJtIxl4w!/b&bo=kAGQAQAAAAABByA!&rf=viewer_4', // 分享图标
        type: '', // 分享类型,music、video或link，不填默认为link
        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
        success: function(res) {
          console.log(res);
          console.log('取“分享给朋友”按钮点击状态及自定义分享内容接口');
          console.log('onMenuShareAppMessage');
          console.log('aaaa');
          // 用户确认分享后执行的回调函数
          that.$http
            .post('/activity/share', {
              source: 'questionnaire '
            })
            .then(res => {
              console.log('分享的回调函数', res);
              window.location.reload();
            })
            .catch(res => {
              console.log(res);
            });
        },
        cancel: function(res) {
          console.log(res);
          console.log('onMenuShareAppMessage');
          // 用户取消分享后执行的回调函数
          console.log('取消分享');
          console.log('取消分享给朋友');
        },
        fail: function(res) {
          console.log(res);
          console.log('失败分享给朋友, onMenuShareAppMessage, fail');
        }
      });

      wx.hideMenuItems({
        menuList: [
          'menuItem:copyUrl',
          'menuItem:originPage',
          'menuItem:exposeArticle',
          'menuItem:openWithQQBrowser',
          'menuItem:openWithSafari',
          'menuItem:share:email',
          'menuItem:favorite'
        ]
      });
    });
  }
};
</script>
<style lang="scss" scoped>
@import './home.scss';
</style>
